<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="author" content="Tencent.AlloyTeam.Jetyu" />
	<meta name="copyright" content="Tencent.AlloyTeam" />
	<title>Time Machine - fx demo</title>
	<style type="text/css">
		#draw-target {
			width:480px;
			height:320px;
			background-color:#ccf;
			position:relative;
		}
	</style>
</head>
<body>
	<!-- 注释 -->
	<h1 id="title" class="title">Tencent AlloyTeam 标准文档</h1>
	<div>
		<h3>Title</h3>
		<p>
			标准文档
		</p>
	</div>


	<div id="draw-target">
	</div>
	<p id="info1"></p>
	<p id="info2"></p>
	<p id="info3"></p>


	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>

	<script type="text/javascript" src="../src/jx.core.js"></script>
	<script type="text/javascript" src="../src/jx.base.js"></script>
	<script type="text/javascript" src="../src/jx.browser.js"></script>
	<script type="text/javascript" src="../src/jx.dom.js"></script>
	<script type="text/javascript" src="../src/jx.event.js"></script>
	<script type="text/javascript">
	
		/**
		 * 时间机器 Time Machine
		 *
		 */
		var timeMachine = function (maxFPS) {
			var paused = true,
				sumFPS = 0,
				count = 0,
				oldTime;

			return {

				// 获取时间信息
				getInfo: function () {

					if(paused === true) {
						paused = false;
						oldTime = +new Date();
						return {
							elapsedTime:0, 
							coeff:0, 
							FPS:0, 
							averageFPS:0 
						};                        
					} else {
						var newTime = +new Date();
						var elapsedTime = newTime - oldTime;
						oldTime = newTime;
						var FPS = 1000 / elapsedTime;
						count ++;
						sumFPS += FPS;                         
						return {
							elapsedTime: elapsedTime,
							coeff: maxFPS / FPS,
							FPS: FPS,
							averageFPS: sumFPS / count
						};

					}

					
				},

				// 暂停方法
				pause: function() {
					paused = true;
				}
			};
		};

						
						
		var DHTMLSprite = function (params) {
				var width = params.width,
					height = params.height,
					imagesWidth = params.imagesWidth,
					$element = params.$drawTarget.append('<div/>').find(':last'),
					elemStyle = $element[0].style,
					mathFloor = Math.floor;

				$element.css({
						position: 'absolute',
						width: width,
						height: height,
						backgroundImage: 'url(' + params.images + ')'
				});

				var that = {
						draw: function (x, y) {
								elemStyle.left = x + 'px';
								elemStyle.top = y + 'px';
						},
						changeImage: function (index) {
								index *= width;
								var vOffset = -mathFloor(index / imagesWidth) * height;
								var hOffset = -index % imagesWidth;
								elemStyle.backgroundPosition = hOffset + 'px ' + vOffset + 'px';
						},
						show: function () {
								elemStyle.display = 'block';
						},
						hide: function () {
								elemStyle.display = 'none';
						},
						destroy: function () {
								$element.remove();
						}
				};
				return that;
		};


		var bouncySprite = function(params) {
			var x = params.x,
				y = params.y,
				xDir = params.xDir,
				yDir = params.yDir,
				maxX = params.maxX,
				maxY = params.maxY,
				animIndex = 0,
				that = DHTMLSprite(params);

			that.moveAndDraw = function(tCoeff) {

				x += xDir * tCoeff;
				y += yDir * tCoeff;
				animIndex += xDir > 0 ? 1* tCoeff : -1* tCoeff;                                             
				var animIndex2 = (animIndex%5)>>0;              
				animIndex2 += animIndex2 < 0 ? 5: 0;

				if ((xDir < 0 && x < 0) || (xDir > 0 && x >= maxX)) {
					xDir = -xDir;
				}
				if ((yDir < 0 && y < 0) || (yDir > 0 && y >= maxY)) {
					yDir = -yDir;
				}
				that.changeImage(animIndex2);
				that.draw(x, y);
			};
			return that;
		};

		var bouncyBoss = function(numBouncy, $drawTarget) {
			var bouncys = [], timer = timeMachine(40);
						
		   
			for (var i = 0; i < numBouncy; i++) {
				bouncys.push(bouncySprite({
					images: './style/image/sprite.png',
					imagesWidth: 256,
					width: 64,
					height: 64,
					$drawTarget: $drawTarget,
					x: Math.random() * ($drawTarget.width() - 64),
					y: Math.random() * ($drawTarget.height() - 64),
					xDir: Math.random() * 4 - 2,
					yDir: Math.random() * 4 - 2,
					maxX: $drawTarget.width() - 64,
					maxY: $drawTarget.height() - 64
				}));
			}
			var moveAll = function() {                       
				var timeData = timer.getInfo();
				var len = bouncys.length;
				for (var i = 0; i < len; i++) {
					bouncys[i].moveAndDraw(timeData.coeff);
				}                 

				   
				$('#info1').text( 'FPS: ' + Math.floor(timeData.FPS) );
				$('#info2').text( 'Average FPS: ' + Math.floor(timeData.averageFPS) );
				$('#info3').text( 'Time Coefficient: ' +  timeData.coeff.toFixed(2));

				setTimeout(moveAll, 1000/68);

			}
			moveAll();
		};


		$(document).ready(function() {
			bouncyBoss(100, $('#draw-target'));
		});

	</script>
</body>
</html>